<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuCode" placeholder="SKU编码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-cascader
                style="width: 100%;"
                placeholder="分类"
                v-model="queryParams.classifyIds"
                :options="skuClassifyList"
                :show-all-levels="false"
                :props="{expandTrigger:'hover',value:'classifyId',label:'title'}"
                @change="changeClassId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.attrName" placeholder="属性" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="queryParams.warehouseId" style="width: 100%" clearable placeholder="仓库">
              <el-option
                  v-for="item in warehouseList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-select v-model="queryParams.zone" style="width: 100%" clearable
                       placeholder="库区">
              <el-option
                  v-for="item in zone_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button type="primary">导出</el-button>
    </div>
    <vxe-table
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="skuName" width="220" title="商品名称"></vxe-column>
      <vxe-column field="skuCode" width="220" title="SKU编码"></vxe-column>
      <vxe-column field="coverUrl" width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl"></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="classifyName" width="150"  title="分类"></vxe-column>
      <vxe-column field="attrName" width="150"  title="属性"></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150"  title="仓库"></vxe-column>
      <vxe-column field="onhandNum" width="100"  title="可用总数量">
      </vxe-column>
      <vxe-column field="zone" title="库区" width="150"  class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.inventoryDetailList" :key="index">
              <div class="flexSub">
                {{ returnDictLabel(zone_type, item.zone) }}
              </div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="locationName" title="库位" width="150"  class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.inventoryDetailList" :key="index">
              <div class="flexSub">{{ item.locationName }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="avlNum" title="可用数量" width="100"  class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.inventoryDetailList" :key="index">
              <div class="flexSub">{{ item.avlNum }}</div>
            </template>
          </div>
        </template>
      </vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

  </div>

</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import {
  areaGetFilter,
  getSkuStatisticsList,
  warehouseGetFilter
} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";

const { proxy } = getCurrentInstance();
const { zone_type } = proxy.useDict("zone_type");
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
let isShowDialog = ref(false)
let total = ref(1)
let loading = ref(false)
let tableHeight = ref(0);
let skuDetails = ref([])//关联sku详情
nextTick(() => {
  tableHeight.value = window.innerHeight - 330;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 330;
}

onMounted(() => {
  getWarehouseFilter()
  getList()
})
let tableList = ref([])

function getList() {
  loading.value = true
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getSkuStatisticsList(params).then(res => {
    loading.value = false
    tableList.value = res.data
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};

let warehouseList = ref([])

function getWarehouseFilter() {
  warehouseGetFilter({
    status: 0
  }).then(res => {
    if (res.code === 200) {
      warehouseList.value = res.data.map(item => {
        item.value = item.warehouseId
        item.label = item.warehouseName
        return item
      })

    }
  })
}

function clickView(row) {
  isShowDialog.value = true
  if (row.skuDetails) {
    skuDetails.value = row.skuDetails.map(item => {
      item.links = item.link.split(",")
      return item
    })
  }
}

function handleClose() {
  isShowDialog.value = false;
}
</script>

<style scoped lang="scss">
:deep(.flexTd) {
  padding: 0 !important;

  .vxe-cell {
    padding: 0 !important;
  }
}

.flexParent {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.flexSub {
  height: 50px;
  line-height: 50px;
}

.flexSub:not(:last-child) {
  border-bottom: 1px solid #e8eaec;
}
</style>